<template>
    <div id="right3"> 
      <ul id="main">
        <li v-for="(item, index) in circleData" :key="index" class="active">
          <div>
            <span style="font-size:12px">{{ item.name }}</span>
            <countTo :startVal="0" :endVal="item.value" :duration="2000" class="number" :ref="'countTo'+index" ></countTo>
          </div>
        </li>
      </ul>
    </div>
  
  </template>
  
  <script> 
    import countTo from "vue-count-to"
    export default {
      components:{countTo},
      data() {
        return {
          circleData: [
            {
              name: '临汾',
              value: 14
            },
            {
              name: '忻州',
              value: 12
            },
            {
              name: '吕梁',
              value: 12
            },
            {
              name: '运城',
              value: 12
            },
            {
              name: '大同',
              value: 10
            },
            {
              name: '晋中',
              value: 10
            },
            {
              name: '长治',
              value: 10
            },
            {
              name: '太原',
              value: 7
            },
            {
              name: '晋城',
              value: 6
            },
            {
              name: '朔州',
              value: 4
            },
            {
              name: '阳泉',
              value: 3
            }
  
          ],
          circleDom: [],
          circleArr: [],
          //初始化运动的最大宽和高，初始定义0
          maxW: 0,
          maxH: 0,
          timer: null,
          timerArr: [],
          count: 0,
        };
      },
      mounted() { 
        this.initBubble() 
      },
      methods: { 
        initBubble() {
          let main = document.getElementById("main");
          let divDom = main.getElementsByClassName("active"); //获取新增加的dom
          if (!divDom.length) return; 
  
          //给新增加的dom设置宽高
          for (let i = 0; i < divDom.length; i++) { 
            // 10个以上尺寸变小
            divDom[i].style.width = "56px";
            divDom[i].style.height = "56px"; 
            this.circleDom.push(divDom[i])
          }
  
          //根据浏览器窗口的大小自动调节小球的运动空间
          window.onresize = () => {
            this.maxW = main.clientWidth - divDom[0].clientWidth; //为了让小球不卡在浏览器边缘
            this.maxH = main.clientHeight - divDom[0].clientHeight; // 所以要减去自身的宽高
          };
          onresize();
  
          //数组对象的初始化
          for (let i = 0; i < this.circleDom.length; i++) {
            let obj = {};
            console.log(this.circleDom[i]);
            if (this.circleDom[i].getAttribute("class") === 'active') {
              obj.x = Math.floor(Math.random() * (this.maxW + 1)); //初始x坐标
              obj.y = Math.floor(Math.random() * (this.maxH + 1)); //初始y坐标
              obj.cx = obj.x + this.circleDom[0].offsetWidth / 2;//圆心x坐标
              obj.cy = obj.y + this.circleDom[0].offsetHeight / 2;//圆心y坐标
              obj.movex = Math.floor(Math.random() * 2); //x轴移动方向
              obj.movey = Math.floor(Math.random() * 2); //y轴移动方向
              obj.speed = 0.2; //随机速度
              obj.timer = null; //计时器
              obj.index = i; //索引值
              this.circleArr.push(obj)
              //小球位置初始化
              this.circleDom[i].style.left = obj.x + 'px';
              this.circleDom[i].style.top = obj.y + 'px';
            } else {
              //保留之前数据得位置信息，不刷新位置
              obj = this.circleArr[i]
            }
            this.move(obj);
          }
        },
  
        //移动函数
        move(balls) {
          //每个球单独有定时器
          balls.timer = setInterval(() => {
            if (balls.movex === 1) {
              //如果往右跑，则一直加速度，碰到边界，改为反方向运动
              balls.x += balls.speed;
              if (balls.x + balls.speed >= this.maxW) {
                //防止小球出界
                balls.x = this.maxW;
                balls.movex = 0; //小球运动方向发生改变
              }
            } else {
              balls.x -= balls.speed; // 1和0表示正反方向
              if (balls.x - balls.speed <= 0) {
                balls.x = 0;
                balls.movex = 1;
              }
            }
            if (balls.movey === 1) {
              balls.y += balls.speed;
              if (balls.y + balls.speed >= this.maxH) {
                balls.y = this.maxH;
                balls.movey = 0;
              }
            } else {
              balls.y -= balls.speed;
              if (balls.y - balls.speed <= 0) {
                balls.y = 0;
                balls.movey = 1;
              }
            }
            if (this.circleDom[balls.index]) {
              balls.cx = balls.x + this.circleDom[0].offsetWidth / 2;//小球圆心等于：运动中x的值加上自身的半径
              balls.cy = balls.y + this.circleDom[0].offsetHeight / 2;
              this.circleDom[balls.index].style.left = balls.x + "px"; //小球相对于屏幕的位置
              this.circleDom[balls.index].style.top = balls.y + "px";
              this.crash(balls.index); //每个小球进行碰撞检测
            }
          }, 25);
          this.timerArr.push(balls.timer)
        },
        //碰撞函数
        crash(a) {
          let container = [...this.circleArr]
          let ball1x = container[a].cx; //在数组中任意球的圆心坐标
          let ball1y = container[a].cy;//思路：先随便拿一个球，然后遍历所有球，拿这个球和所有球的圆心距离比较
          for (let i = 0; i < container.length; i++) {
            if (i !== a) { //判断取出来的球不是本身，才能和其他球进行距离判断
              let ball2x = container[i].cx; //将其他球的圆心坐标赋值给球2
              let ball2y = container[i].cy;
              //圆心距 求两个点之间的距离,开平方
              let distence = Math.sqrt((ball1x - ball2x) * (ball1x - ball2x) + (ball1y - ball2y) * (ball1y - ball2y));
              if (distence <= this.circleDom[0].offsetWidth) { //球心距离和求直径比较
                if (ball1x > ball2x) { //当前位于未知求的右方
                  if (ball1y > ball2y) {//预设未知球撞当前球，然后当前球改变运动
                    container[a].movex = 1; //1表示为正值，对应的右和下
                    container[a].movey = 1;//0表示为负值，对应的左和上
                  } else if (ball1y < ball2y) {
                    container[a].movex = 1;
                    container[a].movey = 0;
                  } else {
                    container[a].movex = 1;
                  }
                } else if (ball1x < ball2x) {
                  if (ball1y > ball2y) {
                    container[a].movex = 0;
                    container[a].movey = 0;
                  } else if (ball1y < ball2y) {
                    container[a].movex = 0;
                    container[a].movey = 1;
                  } else {
                    container[a].movex = 0;
                  }
                } else {
                  if (ball1y > ball2y) {
                    container[a].movey = 1;
                  } else if (ball1y < ball2y) {
                    container[a].movey = 0;
                  }
                }
              }
            }
          }
        }
      },
      beforeDestroy() {
        //清理每个球得定时器
        this.timerArr.forEach(item => {
          clearInterval(item)
        })
        //清理签到数据
        clearInterval(this.timer)
      }
    };
  </script>
  <style lang='scss' scoped>
    
  
    #main {
      position: relative;
      width: 400px;
      height: 230px;
      overflow: hidden;
      padding: 0;
  
      li {
        position: absolute;
        overflow: hidden;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        box-shadow:#0097FF 0px 0px 20px inset;
        &.active {
          animation: scaleBox 1s 1;
        }
  .number{
    font-size: 18px;
    font-weight: 600;
  }
        @keyframes scaleBox {
          0% {
            transform: scale(1);
          }
          50% {
            transform: scale(1.5);
          }
          100% {
            transform: scale(1);
          }
      }
  
        div {
          span {
            display: block;
            width: 100%;
            color: #fff;
            text-align: center;
          }
        }
      }
    }
  </style>